<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page language="java" import="com.limao.Tool.CacheClass"%>
<%@ page language="java" import="com.limao.CacheManager.AdvInfo"%>
<%@include file="/pc/jsp/common/common.jsp"%>

<%
    float authRmb=AdvInfo.CompanyAuthRmbParm();
%>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <title>成为供应商-个人</title>
    <link rel="stylesheet" href="js/validation/screen.css" />
    <script src="js/validation/jquery.js"></script>
    <script src="js/validation/jquery.validate.js"></script>
    <script src="js/validation/messages_zh.js"></script>
    
    <script src="js/ajaxfileupload.js"></script>
    <script>
		$(window).load(function() {
			headertabcurrent=5;
			$("#header").load("pc/header.jsp"); 
			$("#footer").load("pc/footer.jsp"); 
		});
	
		
	</script>
    <style>
                p.error{
                    color:#f51010;
                    font-size:12px;
                    margin-left:170px;
                 }
    </style>	
	
	
</head>
<body  ontouchstart="">
    <!--header-->
	<div  id="header"> </div>

	<!--container-->
    <div class="container jz" style="margin-top: 18px;">
    <form  method="post" id="signupForm" action="" >
        <div class="w100 of bcf">
            <div class="fqzcTittle jz of clearfix">
                <div class="fl f20 c3">
                    发起人认证<span class="f16 c9" style="margin-left: 20px">已认证者，请登陆管理后台操作</span>
                </div>
                <div class="fr f16 c9">
                    供应商个人认证，支付发起人手续费<sapn class="cred"><%=authRmb%></sapn>元
                </div>
            </div><!--fqzcTittle-->
            <div class="w100 of">
  
                <div class="ishenqing jz of">
                    <p class="c3 f20 fw400" style="margin:36px auto 30px;">身份证验证信息（必须填写个人真实个人有效资料）</p>
                    <div class="zcDiv clearfix of">
                        <label for="IDcard" class="IDcard f18 fl"><img src="pc/images/xing.png" class="xing dib pr">身份证号码</label>
                        <input type="text" name="IDcard" id="IDcard" class="zcInput fr" maxlength="40" />
                    </div>

                    <div class="zcDiv clearfix of">
                        <label for="IDname" class="IDcard f18 fl"><img src="pc/images/xing.png" class="xing dib pr">身份证姓名</label>
                        <input type="text" name="IDname" id="IDname" class="zcInput fr" />
                        <p class="t2 cred f14"></p>
                    </div>
                    <div class="zcDiv clearfix of">
                        <label for="zhizhao" class="IDcard f18 fl"><img src="pc/images/xing.png" class="xing dib pr">身份证相片</label>
                        <div class="zhizhao  db tc f16 fw700 ffa fl cursor pr of" id="zhizhao1" onclick="triggerFile($('#zhizhaoImg1'));">
                            +<span style="font-size: 24px;margin-left: 10px">正面照</span>
                            <div id="viewImg1" class="viewImg">
                            </div>
                        </div>
                        <input type="hidden" value="" id="cardImg1" name="cardImg1">
                        <input type="file" value="" id="zhizhaoImg1" name="zhizhaoImg1" class="zhizhaoImgInput" class="required" accept="image/*" onchange="showPic('zhizhaoImg1',$('#viewImg1'),'cardImg1');"/>
                    

                        <div class="zhizhao  db tc f16 fw700 ffa fl cursor pr of" id="zhizhao2" onclick="triggerFile($('#zhizhaoImg2'));">
                            +<span style="font-size: 24px;margin-left: 10px">反面照</span>
                            <div id="viewImg2" class="viewImg">
                            </div>
                        </div>
                        <input type="hidden" value="" id="cardImg2" name="cardImg2">
                        <input type="file" value="" id="zhizhaoImg2" name="zhizhaoImg2" class="zhizhaoImgInput" class="required" accept="image/*" onchange="showPic('zhizhaoImg2',$('#viewImg2'),'cardImg2');"/>
                    </div>

					<div class="zcDiv clearfix of">
                        <label for="zhizhao" class="IDcard f18 fl"><img src="pc/images/xing.png" class="xing dib pr">显示用logo</label>
                        <div class="zhizhao  db tc f16 fw700 ffa fl cursor pr of" id="zhizhaologo" onclick="triggerFile($('#zhizhaoImglogo'));">
                            +
                            <div id="viewImglogo" class="viewImg">
                            </div>
                        </div>
                       	<input type="hidden" value="" id="cardLogo" name="cardLogo">
                        <input type="file" value="" id="zhizhaoImglogo" name="zhizhaoImglogo" class="zhizhaoImgInput" class="required" accept="image/*" onchange="showPic('zhizhaoImglogo',$('#viewImglogo'),'cardLogo');"/>
                    </div>                    
                    
                    <script>
                        function triggerFile(file) {
                            var file = file;
                            file.trigger('click');
                        }
                        function showPic(fileURL,imgDiv,cardImg) 
                        {
	                         $.ajaxFileUpload({  
				                 url:"upload",    //需要链接到服务器地址  
				                 type: 'post',         
				                 secureuri:false,  
				                 fileElementId:''+fileURL,                      //文件选择框的id属性  
				                 dataType: 'json',                             //服务器返回的格式，可以是json  
				                 success: function (data)             //相当于java中try语句块的用法  
				                 {  
				                 	if(data['state']==1)
				                 	{
	 		                            var img = '<img src='+imgBaseUrl+data.URLList.IMAGE0+'>';
			                            imgDiv.html(img);
			                            $('#'+cardImg).val(data.URLList.IMAGE0);
				                 	}
				                 	else
				                 	{
				                 	  layer.alert(data.info);
				                 	  $('#'+cardImg).val("");
				                 	}
				                 },  
				                 error: function (data)             //相当于java中catch语句块的用法  
				                 {  
				                 	$('#'+cardImg).val("");
				                 }  
				               }  
				             );  
                        }
                    </script>

					<p class="c3 f20 fw400" style="margin:36px auto 30px;">地址信息（必须填写真实有效资料）</p>
                    <div class="zcDiv clearfix of">
                        <label for="city_3" class="IDcard f18 fl"><img src="pc/images/xing.png" class="xing dib pr">所在地</label>
                        <div id="city_3" class="fr">
                            <div class="w100 of clearfix">
                                <div class="fl f16">
                                    <select class="prov" id="prov" name="prov" required="required"></select>&nbsp;(省份)
                                </div>
                                <div class="fr f16" style="margin-left: 38px">
                                    <select class="city" id="city" name="city" disabled="disabled" required="required"></select>&nbsp;(城市)
                                </div>
                            </div>
                        </div> <!--city_3-->
                        <script src="js/jquery.cityselect.js"></script>
                        <script>
                            $(function () {
                                $("#city_3").citySelect({required: false});
                            })
                        </script>
                    </div>
                    <div class="zcDiv clearfix of">
                        <input type="text" name="detailAddress" id="detailAddress" class="zcInput fr" placeholder="详细地址"/>
                    </div>

                    <p class="c3 f20 fw400" style="margin:36px auto 30px;">联系人信息（必须填写真实有效资料）</p>
                    <div class="zcDiv clearfix of">
                        <label for="username" class="IDcard f18 fl"><img src="pc/images/xing.png" class="xing dib pr">认证人联系人</label>
                        <input type="text" name="username" id="username" class="zcInput fr" placeholder="真实姓名"/>
                    </div>
                    <p class='w100 cred db'></p>
                    <div class="zcDiv clearfix of">
                        <input type="text" name="usertel" id="usertel" class="zcInput fr" placeholder="联系电话"/>
                    </div>
                    <div class="zcDiv clearfix of">
                        <input type="text" name="qq" id="qq" class="zcInput fr" placeholder="QQ/微信"/>
                    </div>


                    <p class="c3 f20 fw400" style="margin:60px auto 24px;">缴纳成为供应商手续费</p>
                    <p class="corange fw600" style="font-size: 40px;margin-left: 202px;"><%=authRmb%><sapn style="font-size: 35px;">00</sapn></p>
                    <p class="c6 f18 fw400" style="margin:35px auto 15px;">选择支付方式</p>
                    <div class="clearfix of w100">
                        <input type="radio" id="zhifubao" checked="checked" name="payment" value="zhifubao">
                        <label name="zhifubao" class="labelR checked" for="zhifubao">支付宝</label>
                        <input type="radio" id="wexin" name="payment" value="wexin">
                        <label name="wexin" class="labelR" for="wexin">微信</label>
                        <input type="radio" id="xianxia" name="payment" value="xianxia">
                        <label name="xianxia" class="labelR"  for="xianxia" style="margin-right: 0;">线下付款</label>
                    </div>
                    <div id="xianxiaDiv" class="zcDiv w100">
                        <div class="zhizhao  db tc f16 fw700 ffa cursor pr of" id="zhizhao3" onclick="triggerFile($('#zhizhaoImg3'));" style="margin-left: 226px;">
                            +
                            <div id="viewImg3" class="viewImg">
                            </div>
                        </div>
                         <input type="hidden" value="" id="cardImg3" name="cardImg3">
                        <input type="file" value="" id="zhizhaoImg3" name="zhizhaoImg3" class="zhizhaoImgInput" class="required" accept="image/*" onchange="showPic('zhizhaoImg3',$('#viewImg3'),'cardImg3');"/>
                        <p class="c9 f12 tc mgt10">点击上传线下付款凭证图</p>
                    </div>
                    <div class="zcDiv w100">
                        <input type="button" name="" id="" value="提交申请" onclick="Sub();" class="fqztSub blueh cursor db jz cf tc f20"/>
                    </div>

                    <script>
                        $(function() {
                        
                           var paywayVal=2;

                        	
                            $('.labelR').click(function(){
                                var current =$(this);
                                var currentId = $(this).attr('id');
                                $('.labelR').removeClass('checked');
                                current.addClass('checked');
                                //$('input[name="payment"]').removeAttr('checked') && current.prev('input[name="payment"]').attr('checked', 'checked');
                               
                                var payWay = $('label.checked').text();
                                if(payWay=='支付宝')
	                            {
	                            	paywayVal=0;
	                            }
	                            else if(payWay=='微信')
	                            {
	                            	paywayVal=1;
	                            }
	                            else if(payWay=='线下付款')
	                            {
	                            	paywayVal=2;
	                            }
                                 
                                
                                if(currentId=='fukuanbtn'){
                                   $("#xianxiaDiv").slideDown();
                                }else {
                                    $("#xianxiaDiv").slideUp();

                                }
                            });

                            $("#xianxiazhifu").bind("click",function () {
                                $(".theme-popover-mask").fadeIn();
                                $("#photoclip2").fadeIn();
                            })
                        });
                    </script>
                </div><!--ishenqing-->
            </div>
        </div>
	</form>
    </div>

	<!--footer-->
    <div id="footer" class="footer w100 of"> </div>
    
    
    <div class="theme-popover-mask"></div>
   
    <div id="successSub" class="w100 h100 pf">
    <div class="jz of bcf">
        <div class="sqtittle tc jz c3">
            申请提交成功
        </div>
        <p class="successSubP f18 t2">
            您的认证申请已经提交，工作人员在三个工作日对资料进行审核，期间
            请保持通讯顺畅。
        </p>
        <button class="successSubBtn cf tc jz db blueh" onclick="successSubHide();">关闭</button>
    </div>
</div><!--successSub-->

<script>
var myValidator;
$().ready(function() {
	 	  myValidator=$("#signupForm").validate(
	 		{
	 			rules:{
	 				IDcard:{
	 					required: true,
                		isIdCardNo:true 
  	 				},
	 				IDname:{
	 					required: true,
                		rangelength:[2,15] 
  	 				},	 
  	 				prov: {
                		required:true,
                		isShengcity:true
            		},			
  	 				city: {
                		required:true,
                		isShengcity:true
            		},
            		detailAddress:{
            			required:true,
             			rangelength:[5,50] 
            		},
            		username:
            		{
            			required:true,
            			rangelength:[2,15]
            		},
            		usertel:
            		{
            			required:true,
            			digits:true 			
	 				},
	 				cardImg1:
            		{
            			required:true
	 				},
	 				cardImg2:
            		{
            			required:true
	 				},
	 				cardLogo:
            		{
            			required:true
	 				}
	 				
	 			},
	 			//errorElement: 'p',
                errorPlacement: function(error, element) {
                // Append error within linked label
                
                $( element )
	                .closest( "form" )
	                .find( element )
	                .parent("div")
	                .after( error );
                },
                errorElement: "p"
				
	 		});
	 		
	 		
	 		
	 		
	 		
	 		
});
    function successSubHide() {
        $(".theme-popover-mask").fadeOut();
        $("#successSub").slideUp();
    }
    
    function proEstimate() {
        var provVal =$.trim($(".prov").find("option:selected").val());
        var cityVal =$.trim($(".city").find("option:selected").val());
        if(!(provVal == "请选择")&&!(cityVal == "请选择")){
            var info={"prov":provVal,"city":cityVal};
            return info;
        }else{

            return false;
        }
    }

    function Sub() {
         
         //if(myValidator.valid()== false){
         if(myValidator.form()== false){
            layer.alert("填写存在错误 ！");
            return false;
        }
        
        var IDnameVal =$.trim($('#IDname').val());
        var IDcardVal =$.trim($('#IDcard').val());
        var zhizhaoImg1Val =$.trim($('#cardImg1').val());
        var zhizhaoImg2Val =$.trim($('#cardImg2').val());
        var logoVal =$.trim($('#cardLogo').val());
        
        
     	var provVal =$.trim($(".prov").find("option:selected").val());
        var cityVal =$.trim($(".city").find("option:selected").val());
        var detailAddress = $.trim($('#detailAddress').val());
        detailAddress=provVal+cityVal+detailAddress;
        var usernameVal =$.trim($('#username').val());
        var usertelVal = $.trim($('#usertel').val());

        var zhizhaoImg3Val =$.trim($('#cardImg3').val());
        var qqVal = $.trim($('#qq').val());
         
        if(paywayVal!=2)
        {
        	layer.alert("暂不支持，请选择线下付款  进行测试。");
        }  
         //IDcard  IDname  zhizhaoImg1 zhizhaoImg2 zhizhaoImglogo  prov  city  detailAddress  username  usertel  qq   zhifubao( zhifubao  wexin  xianxia  )   zhizhaoImg3
        $.ajax({
            url: "PlugServlet",
            data: JSON.stringify({m:1610,iscompany:0,companylogo:logoVal,companyman:IDnameVal,mancardno:IDcardVal,mancardimg0:zhizhaoImg1Val,mancardimg1:zhizhaoImg2Val,address:detailAddress,tel:usertelVal,telman:usernameVal,paytype:paywayVal,payimage:zhizhaoImg3Val,qq:qqVal}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
                $(".theme-popover-mask").fadeIn();
                $("#successSub").fadeIn();
            },
            success: function (data) {
	             if(data['state']==1)
					layer.alert(data.info);
				 else
				  	layer.alert(data.info);
            },
            error: function (data) {
                return false;
            },
            complete: function () {
                 $(".theme-popover-mask").fadeOut();
                $("#successSub").fadeOut();
            }
        });
    }
</script>
</body>
</html>